<template>
  <!-- 编辑和查看 -->
  <el-dialog
    :title="dialogTitle"
    :visible.sync="showDialog"
    class="dialog-big"
    :close-on-click-modal="false"
    center
  >
    <el-form ref="form" :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            label="组件名称"
            prop="title"
            :rules="this.$validator.must"
          >
            <el-input v-model="form.title" auto-complete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="默认开启">
            <el-switch
              v-model="form.defaultFlag"
              active-color="#46a6ff"
              inactive-color="#DCDFE6"
              :active-value="'1'"
              :inactive-value="'0'"
            />
            <el-input-number
              v-if="form.defaultFlag === '1'"
              v-model="form.compSn"
              style="margin-left: 5px"
              :step="1"
              :min="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="组件类型"
            prop="compType"
            :rules="this.$validator.must"
          >
            <my-select
              v-model="form.compType"
              clearable
              class="width100percent"
              :dict-type="'compTypeList'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="选择模板"
            prop="vueName"
            :rules="this.$validator.must"
          >
            <my-select
              v-model="form.vueName"
              clearable
              class="width100percent"
              :dict-type="'vueNameOptions'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="宽" prop="width" :rules="this.$validator.must">
            <el-radio
              v-model="form.widthType"
              label="percentage"
            >填写百分比</el-radio>
            <el-radio v-model="form.widthType" label="num">填写数值</el-radio>

            <el-input
              v-if="form.widthType === 'percentage'"
              v-model="form.width"
              auto-complete="off"
            />
            <el-input-number
              v-if="form.widthType === 'num'"
              v-model="form.width"
              class="width100percent"
              :step="1"
              :max="24"
              :min="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="高(px)"
            prop="height"
            :rules="this.$validator.must"
          >
            <el-input-number
              v-model="form.height"
              class="width100percent"
              :min="50"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="组件描述" prop="compDesc">
            <el-input
              v-model="form.compDesc"
              type="textarea"
              :rows="5"
              maxlength="300"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      <el-button @click="showDialog = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      dialogTitle: '',
      form: {
        widthType: 'num'
      },
      showDialog: false
    }
  },
  methods: {
    init(dialogTitle, row) {
      this.dialogTitle = dialogTitle
      if (row && row.compId) {
        this.showDialog = true
        // this.getById(row.compId);
        return
      } else {
        //   初始化
        this.form = {
          width: 12,
          height: '200',
          defaultFlag: 0,
          widthType: 'num'
        }
      }
      this.showDialog = true
      // 初始化
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 编辑的回显
    getById(compId) {
    },
    /** 提交按钮 */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {

      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
